<template>
  <div id="right-home" :style="{ backgroundImage: bgImg, color: '#38E5DE' }">
    <div
        class="title base"
        style="
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
        "
    >
      运输冷冻库
    </div>
    <div class="package-info">
      <!-- <div class="package-box">
        <div class="package-title">集装箱(总数/个)</div>
        <div class="package-list">
          <span>当日</span>
          <span>{{Pass_Day_Container_Count}}</span>
        </div>
        <div class="package-list">
          <span>累计</span>
          <span>{{Pass_Cum_Container_Count}}</span>
        </div>
      </div> -->
      <!-- <div class="package-box2" style=" margin-bottom: 0;">
        <div class="package-title">集装箱(总重/吨)</div>
        <div class="package-list">
          <span>当日</span>
          <span>{{Pass_Day_Container_Weight}}</span>
        </div>
        <div class="package-list">
          <span>累计</span>
          <span>{{Pass_Cum_Container_Weight}}</span>
        </div>
      </div> -->
      <div class="package-bigbox" style=" margin-bottom: 0;">
       <div class="package-list">
          <span>库存（总重吨）</span>
          <span>1,032,200</span>
        </div>
        </div>
    </div>
    <div
        class="title base"
        style="
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
          padding-top: 25px;
        "
    >
      运输入冷冻库
    </div>
    <div class="package-info">
      <div class="package-box">
        <div class="package-title">集装箱(总数/个)</div>
        <div class="package-list">
          <span>当日</span>
          <span>1,000</span>
        </div>
        <div class="package-list">
          <span>累计</span>
          <span>1,000</span>
        </div>
      </div>
      <div class="package-box2">
        <div class="package-title">集装箱(总重/吨)</div>
        <div class="package-list">
          <span>当日</span>
          <span>1,000</span>
        </div>
        <div class="package-list">
          <span>累计</span>
          <span>1,000</span>
        </div>
      </div>
    </div>
     <div
          class="title base"
          style="
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            line-height: 24px;
            margin-top: 20px
          "
        >
          冻库信息（单位：个）
        </div>
        <div class="freezer-info">
            <div class="card-info" @click="checkCardInfo(1)">
                <span>消毒证明</span> <span><em>{{Frozen_Disinfection_Prove_Count}}</em></span>
            </div>
            <div class="card-info" @click="checkCardInfo(2)">
                <span>核酸证明</span> <span><em>{{Frozen_Nucleic_Acid_Prove_Count}}</em></span>
            </div>
            <div class="card-info" @click="checkCardInfo(3)">
                <span>检验检疫<br/>证明</span> <span><em>{{Frozen_Quarantine_Prove_Count}}</em></span>
            </div>
            <div class="card-info" @click="checkCardInfo(4)">
                <span>报关单<br/>证明</span> <span><em>{{Frozen_Customs_Prove_Count}}</em></span>
            </div>
            <div class="card-info" @click="checkCardInfo(5)">
                <span>集中仓单</span> <span><em>{{Frozen_WareHouse_Bill_Prove_Count}}</em></span>
            </div>
        </div>
        <div
          class="title base"
          style="
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            line-height: 24px;
            margin-bottom: 5px;
          "
        >
          冷链企业（单位：个）
        </div>
        <div class="freezer-company">
            <div class="company-info">
                <img src="../../assets/img/common/cp1.png" alt="">
                <div>
                    <span>港口</span>
                    <span>{{Cold_Port_Count}}</span>
                </div>
            </div>
            <div class="company-info">
                <img src="../../assets/img/common/cp2.png" alt="">
                <div>
                    <span>承运商</span>
                    <span>{{Cold_Carrier_Count}}</span>
                </div>
            </div>
            <div class="company-info">
                <img src="../../assets/img/common/cp3.png" alt="">
                <div>
                    <span>冻库</span>
                    <span>{{Cold_Frozen_Count}}</span>
                </div>
            </div>
            <div class="company-info">
                <img src="../../assets/img/common/cp4.png" alt="">
                <div>
                    <span>经营商</span>
                    <span>{{Cold_Operator_Count}}</span>
                </div>
            </div>
            <div class="company-info">
                <img src="../../assets/img/common/cp5.png" alt="">
                <div>
                    <span>销售商超</span>
                    <span>{{Cold_Vendor_Super_Count}}</span>
                </div>
            </div>
            <div class="company-info">
                <img src="../../assets/img/common/cp6.png" alt="">
                <div>
                    <span>其他销售场所</span>
                    <span>{{Cold_Other_Sale_Count}}</span>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import http from "@/commons/utils/httpUtil";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import echartsUtil from "../../commons/utils/echartsUtil";
import baseConfig from "@/service/index";

export default defineComponent({
  name: "RightMenu",
  setup(props) {
    const state = reactive({
      bgImg: "url(" + require("../../assets/img/common/ce_left.png") + ")",
      percentage1: "50%",
      percentage2: "70%",
      percentage3: "30%",
      activeName: 'first',
      Pass_Day_Container_Count:0,
      Pass_Cum_Container_Count:0,
      Pass_Day_Container_Weight:0,
      Pass_Cum_Container_Weight:0,
      Frozen_Disinfection_Prove_Count:0,
      Frozen_Nucleic_Acid_Prove_Count:0,
      Frozen_Quarantine_Prove_Count:0,
      Frozen_Customs_Prove_Count:0,
      Frozen_WareHouse_Bill_Prove_Count:0,
      Cold_Port_Count:0,
      Cold_Frozen_Count:0,
      Cold_Carrier_Count:0,
      Cold_Operator_Count:0,
      Cold_Vendor_Super_Count:0,
      Cold_Other_Sale_Count:0
    });
    const handleClick = (tab, event) => {
      console.log(tab);
      console.log(event);
    };
    const checkCardInfo = (type) => {
      console.log(type)
      window.AC.ShowWindow(6, baseConfig.basePath +"/right-menu/PackageTable", {
          draggable: false,
          resize: false,
          callbackFn: function (data) {
            console.log("ShowWindow:" + JSON.stringify(data));
          },
        });
    }
     const getPortFreezerData = () => {
      http.get('/large/queryOverviewHomePage').then(res => {
        if(res.data.data && res.data.state == 'success') {
          const { optionList } = res.data.data
          optionList.forEach(item => {
            if(item.key == 'Pass_Day_Container_Count' || item.key == 'Pass_Cum_Container_Count' || item.key == 'Pass_Day_Container_Weight'
              || item.key == 'Pass_Cum_Container_Weight' || item.key == 'Frozen_Disinfection_Prove_Count'
              || item.key == 'Frozen_Nucleic_Acid_Prove_Count' || item.key == 'Frozen_Quarantine_Prove_Count'
              || item.key == 'Frozen_WareHouse_Bill_Prove_Count' || item.key == 'Frozen_Customs_Prove_Count'
              || item.key == 'Cold_Port_Count' || item.key == 'Cold_Frozen_Count'
              || item.key == 'Cold_Carrier_Count' || item.key == 'Cold_Operator_Count'
              || item.key == 'Cold_Vendor_Super_Count' || item.key == 'Cold_Other_Sale_Count'
            ){
              state[item.key] =  item.values
            }
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
    onMounted(() => {
      getPortFreezerData()
    });
    return {
      ...toRefs(state),
      handleClick,
      checkCardInfo
    };
  },
});
</script>
<style>
#right-home {
  height: calc(934px - 16px);
  width: calc(360px - 34px);
  padding: 16px 18px 0 16px;
}
.title {
  padding-bottom: 15px;
  padding-left: 20px;
  margin-bottom: 15px;
  background: url(../../assets/img/common/title-bg.png) no-repeat bottom;
}
.base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.el-tabs__nav {
  width: 100%;
}

.el-tabs__item {
  color: #ffffffd9;
  width: 33.333333%;
}

.el-space__item {
  width: 100%;
}

.el-divider--horizontal {
  margin: 10px 0;
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #fff;
  background-color: #45a5e5;
  font-weight: bold;
}

.el-tabs__active-bar {
  background-color: #4684ae;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #fff;
}
.package-info {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.package-info .package-box {
  width: 158px;
  height: 100px;
  background: url(../../assets/img/common/package-bg2.png) no-repeat center;
}
.package-title {
  position: relative;
  margin-top: 15px;
  text-align: center;
  padding-left: 10px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}

.package-list {
  position: relative;
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  color: #fff;
  font-size: 12px;
}
.package-list:nth-child(3) {
  color: #fff;
}
.package-bigbox{
  width: 408px;
  height: 100px;
  line-height: 80px;
  padding-right: 20px;
  background: url(../../assets/img/common/package-bg.png) no-repeat center;
  margin-bottom: 10px;
}
.package-bigbox > .package-list {
    color: #07c3e8;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}
.package-info .package-box2 {
  width: 158px;
  height: 100px;
  background: url(../../assets/img/common/package-bg1.png) no-repeat center;
  margin-bottom: 10px;
}
.package-box2 .package-title {
  color: #00d5ff;
}
.package-box2 .package-list {
  color: #00d5ff;
  font-weight: bold;
}
/*.package-box2 .package-list:nth-child(3) {
  color: #fff;
}*/
.freezer-info{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.freezer-info .card-info{
    width: 48%;
    height: 52px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color:#fff;
    cursor: pointer;
}
.freezer-info .card-info em{
    font-style: normal;
    font-weight: bold;
}
.freezer-info .card-info:nth-child(1){background:url(../../assets/img/common/card1.png) no-repeat center}
.freezer-info .card-info:nth-child(2){background:url(../../assets/img/common/card2.png) no-repeat center}
.freezer-info .card-info:nth-child(3){background:url(../../assets/img/common/card3.png) no-repeat center}
.freezer-info .card-info:nth-child(4){background:url(../../assets/img/common/card4.png) no-repeat center}
.freezer-info .card-info:nth-child(5){background:url(../../assets/img/common/card5.png) no-repeat center}
.freezer-company{
     position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.freezer-company .company-info{
     display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 49%;
    margin-top:20px;
}
.freezer-company .company-info div{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 120px;
    text-align: left;
    padding-left: 10px;
    color:#FFF;
}
.freezer-company .company-info div span:last-child{
    color:#00D5FF;
    font-weight: bold;
}

</style>